繼續沿用前一天的標頭
lib
- main.dart
- product_control.dart
- product_manager.dart
- products.dart


import 'package:flutter/material.dart';
class ProductControl extends StatelessWidget {
  final Function addProduct;
  //定義一個function來接父層傳來的function
  ProductControl(this.addProduct);
  //從product_manager.dart的ProductControl後面的小括號傳進來的
  @override
    Widget build(BuildContext context) {
      return RaisedButton(
                color: Theme.of(context).primaryColor,
                //使用在main定義的primary顏色(此例為橘色)
                onPressed: () {
                  //按下按鈕後
                  addProduct('Sweet');
                  //把Sweet傳進去function,往上觸發去改變state
                  //寫在state裡面的_products就會加入一個元素
                  //此例為['Sweet']
                },
                child : Text('Add Product')
                //按鈕的文字
              );
    }
}
import 'package:flutter/material.dart';
class Products extends StatelessWidget {
  final List<String> products; 
  //定義一個products陣列
  Products(this.products); 
  //從父層去接_products
  Widget _buildProductItem(BuildContext context ,int index) {
    //一張卡片組件(一個商品) //除了傳入app基本資訊 //還要傳入目前跑到第幾圈
    return Card(
            child: Column(
              children: <Widget>[
                Image.asset('assets/food.jpg'),
                Text(products[index])
                //該陣列的那一圈的值
              ],
            )
          );
  }
  Widget _buildProductList() {
    Widget productCard;
    //定義一個組件變數
    if(products.length > 0){
      //若陣列有東西
      productCard = ListView.builder(
                      itemBuilder: _buildProductItem,
                      itemCount: products.length
                    );
      //變數就是一個listView組件使用builder方法
      //每一圈的組件(_buildProductItem)以及總共幾圈(products.length)
      //這樣就不用寫map了
    }else{
      productCard = Container();
      //不然就回傳空畫面
    }
    return productCard;
  }
  @override
    Widget build(BuildContext context) {
      return _buildProductList();
    }
}
主題來源:
Learn Flutter & Dart to Build iOS & Android Apps